<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <script src="../../js/common.js" type="text/javascript"></script>
    <style>
        #outer {
            width: 150px;
            margin: auto;
            text-align: left;
            display: flex;
            flex-direction: column;
            background-color: #777777;
            border-radius: 5px;
        }

        #outer div {
            width: 150px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #outer div span {
            width: 150px;
            height: 25px;
            margin: auto;
            background-color: #aaaaaa;
            color: white;
            line-height: 25px;
            display: block;
        }
        #outer div a{
            text-decoration: none;
            color: aqua;
            padding-left: 5px;
            display: block;
        }
        .collapse{
            height: 25px;
        }
        #outer::after{
            content: "";
            height: 5px;
        }
        #outer::before{
            content: "";
            height: 5px;
        }
        #outer div a::before{
            content: " - ";
        }
        #outer div a:hover{
            background-color: #000000;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            let spans = document.getElementsByClassName('menuSpan');
            let openDiv = spans[0].parentNode;
            let timer = null;
            for (let i = 0; i < spans.length; i++) {
                bind(spans[i],'click',function () {
                    let parentDiv = this.parentNode;
                    let begin = parentDiv.offsetHeight;//255
                    toggleClass(parentDiv,'collapse');
                    let end = parentDiv.offsetHeight;//25
                    move(parentDiv,'height',begin,end,5,function (){
                        parentDiv.style.height='';
                    });
                    if (parentDiv !== openDiv && !hasClass(openDiv,'collapse')){
                        let begin = parentDiv.offsetHeight;
                        toggleClass(openDiv,'collapse');
                        let end = parentDiv.offsetHeight;
                        move(parentDiv,'height',begin,end,5,function (){
                            parentDiv.style.height='';
                        });
                    }
                    openDiv = parentDiv;
                });
            }

            /**
             * 移动函数存在问题
             * @param obj
             * @param styleName
             * @param begin
             * @param end
             * @param speed
             * @param callback
             */
            //TODO
            function move(obj,styleName,begin,end,speed,callback){
                clearInterval(timer);
                let speeds = 0;
                if (begin > end){
                    speeds = -speed;
                }
                timer = setInterval(function () {
                    begin += speeds;
                    obj.style[styleName] = begin+'px';
                    if (begin < end){
                        clearInterval(timer);
                        callback();
                    }
                },30);
            }
        }
    </script>
</head>
<body>
<div id="outer">
    <div>
        <span class="menuSpan">在线工具</span>
        <a href="#">图形优化</a>
        <a href="#">收藏夹图标生成器</a>
        <a href="#">邮件</a>
        <a href="#">梯度图形</a>
        <a href="#">按钮生成器</a>
    </div>
    <div class="collapse">
        <span class="menuSpan">支持我们</span>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="collapse">
        <span class="menuSpan">合作伙伴</span>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="collapse">
        <span class="menuSpan">测试电流</span>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">1</a>
        <a href="#">2</a>
    </div>
</div>
</body>
</html>